<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child></child>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        const child = {
            template: `
                <div>
                    这是个子组件
                    {{msg}}
                    <button @click="changeMsg">点击</button>
                </div>
            `,
            data() {
                return {
                    msg: "hello world"
                }
            },
            methods: {
                changeMsg() {
                    this.msg = "德玛西亚"
                    console.log(this.msg)
                }
            },
            // update类型的生命周期并不是数据改变就会触发的生命周期
            // 而是当数据改变导致dom的更新或者打补丁才会触发的生命周期
            beforeUpdate() {
                console.log(1)
            },
            // 数据改变导致dom的更新或者打补丁完成后触发的生命周期
            updated() {
                console.log(2) 
            },
        }

        // computed 当依赖的状态发生变化时才会触发的函数 updated 当数据改变导致的dom更新或者打补丁才会触发的逻辑
        //  watch 数据监听监听的方法 当数据改变时会触发对应的逻辑
        new Vue({
            el: "#app",
            components: {
                child
            }
        })
    </script>
</body>
</html>